<template>
	<view class="wrap">
		<view class="service-banner">
			<image class="" src="" style="background-color: lightgray;"></image>
		</view>
		<u-gap height="20" bg-color="#ffffff"></u-gap>
		<u-cell-group class="service-box">
			<u-cell-item icon="phone-fill" title="联系电话" :label="label.phone" :arrow="true" @click="phone()"></u-cell-item>
			<u-cell-item icon="weixin-circle-fill" title="官方微信"  :label="label.wechat" :arrow="true" @click="wechat()"></u-cell-item>
			<u-cell-item icon="qq-circle-fill" title="官方QQ"  :label="label.qq" :arrow="true" @click="qq()"></u-cell-item>
		</u-cell-group>
		
		<u-modal v-model="modal.wechat" title="官方微信" :show-confirm-button="false" :mask-close-able="true" negative-top="100">
			<view class="slot-content" slot="default">
				<uv-qrcode value="https://h5.uvui.cn" size="180"></uv-qrcode>
			</view>
		</u-modal>
		
		<u-modal v-model="modal.qq" title="官方QQ" :show-confirm-button="false" :mask-close-able="true" negative-top="100">
			<view class="slot-content" slot="default">
				<uv-qrcode value="https://h5.uvui.cn" size="180"></uv-qrcode>
			</view>
		</u-modal>
	</view>
</template>

<script>
export default {
	data() {
		return {
			label: {
				phone: '*************',
				wechat: '识别二维码，关注官方微信',
				qq: '***********、***********',
			},
			modal: {
				wechat: false,
				qq: false,
			}
		};
	},
	methods: {
		phone() {
			uni.setClipboardData({
				data: this.label.phone,
				// 成功回调
				success: function () {
					console.log('success');
				},
				// 失败回调
				fail: function () {
					console.log('fail');
				}
			})
		},
		wechat() {
			this.modal.wechat = !this.modal.wechat;
		},
		qq() {
			this.modal.qq = !this.modal.qq;
		}
	}
}
</script>

<style lang="scss">
/deep/ .u-modal-title {
	font-size: 28rpx;
	font-weight: 600;
}
	
.slot-content {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 50rpx;
}
</style>
